<template>
  <div class="MyComments">
    <head-title>我的跟帖</head-title>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div class="comments" v-for="item in info" :key="item.id">
        <div class="date">
          {{ item.create_date | date("YYYY-MM-DD hh:mm") }}
        </div>
        <div class="parents" v-if="item.parent">
          <div class="ask">回复：{{ item.parent.user.nickname }}</div>
          <div class="info">{{ item.parent.content }}</div>
        </div>
        <div class="content">{{ item.content }}</div>
        <div class="post">
          <div class="title">{{ item.post.title }}</div>
          <i class="iconfont iconjiantou1"></i>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      loading: false,
      finished: false,
      pageIndex: 0,
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    async getinfo() {
      this.pageIndex++;
      console.log(this.pageIndex);
      const pageSize = 5;
      const res = await this.$axios.get(
        `/user_comments?pageSize=${pageSize}&pageIndex=${this.pageIndex}`
      );
      this.info = [...this.info, ...res.data.data];
      this.loading = false;

      if (res.data.data.length < 5) {
        this.finished = true;
        this.$toast.fail("对不起已经没有更多信息了");
      }
      console.log(res);
    },
    onLoad() {
      console.log("处理了");

      this.getinfo();
    },
  },
};
</script>

<style scoped lang='less'>
.MyComments {
  .comments {
    padding: 10px;
    .date {
      font-size: 10px;
      opacity: 0.3;
    }
    .parents {
      height: 60px;
      background-color: #ccc;
      opacity: 0.5;
      padding: 10px;
      .ask {
        font-size: 10px;
        padding-bottom: 15px;
      }
      .info {
        font-size: 16px;
      }
    }
    .content {
      font-size: 15px;
      padding: 10px 0;
    }
    .post {
      display: flex;
      .title {
        font-size: 10px;
        opacity: 0.3;
        flex: 1;
      }
    }
  }
}
</style>